<template>
    <el-header class="space-header">
        <n-space align="flex-end" @click="dialogVisible = true">
            <n-avatar :size="100" fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F26%2F20200326100605_SkLVh.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702379201&t=449ae04a921579549f8ed208523c9a62" />
        </n-space>
        <n-descriptions label-placement="left" :column="2" size="large" class="userinfo">
            <n-descriptions-item label="用户名">
                <h3>GGbon</h3>
            </n-descriptions-item>
            <n-descriptions-item label="ID">
                20230092101
            </n-descriptions-item>
            <n-descriptions-item label="个性签名">
                我就是人见人爱花见花开，车见车爆胎，风华绝代绝世天骄的GGbon！
            </n-descriptions-item>
        </n-descriptions>
        <el-button @click="this.$router.push('/linkstart')">
            <el-icon>
                <SvgIcon name="goback"></SvgIcon>
            </el-icon>
        </el-button>
        <el-dialog v-model="dialogVisible" title="上传头像" width="30%" align-center draggable>
            <el-upload class="upload-demo" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                multiple>
                <el-icon class="el-icon--upload">
                    <Plus />
                </el-icon>
                <div class="el-upload__text">
                    拖拽上传或者 <em>点击上传</em>
                </div>
                <template #tip>
                    <div class="el-upload__tip">
                        只能上传jpg/png/jpeg/格式文件
                    </div>
                </template>
            </el-upload>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </el-header>
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue'
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)
const handleRemove = (file) => {
    console.log(file)
}

const handlePictureCardPreview = (file) => {
    dialogImageUrl.value = file.url
    dialogVisible.value = true
}

const handleDownload = (file) => {
    console.log(file)
}
</script>

<style scoped>
.space-header {
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 140px;
}

.userinfo {
    width: 100%;
    margin: 0 40px;
}
</style>